<template>
  <div class="body">
    <!-- 个人信息 -->
    <div class="navtobo">
      <ul>
        <li @click="fanh">
          <div class="img">
            <img src="../assets/syb.png" alt="" />
          </div>
        </li>
        <li><span>个人信息</span></li>
        <li>
          <div class="img">
            <img src="../assets/gd(2).png" alt="" />
          </div>
        </li>
      </ul>
    </div>
    <div class="xingxi">
      <ul>
        <li>
          <div class="img" @click="showPopup">
            <img :src="information.avatar" alt="" v-if="shuax" />
         
          </div>
        </li>
         
        <li>
          <div>
            <span>账号</span>
          </div>
          <div>
            <span>{{ information.username }}</span>
          </div>
          <div>
            <img src="../assets/fz.png" alt="" />
          </div>
        </li>
        <li>
          <div>
            <span>昵称</span>
          </div>
          <div>
            <span>{{ information.nickname }}</span>
          </div>
          <div>
            <img src="../assets/syb.png" alt="" />
          </div>
        </li>
        <li>
          <div>
            <span>性别</span>
          </div>
          <div>
            <span v-if="information.gender == 1">男</span>
            <span v-else>女</span>
          </div>
          <div>
            <img src="../assets/syb.png" alt="" />
          </div>
        </li>
      </ul>
    </div>

    <van-popup v-model="show" position="bottom" :style="{ height: '20%' }">
      <ul class="fnele">
        <li>
          <van-uploader
            :before-read="beforeRead"
            :after-read="afterRead"
            :max-size="500 * 1024"
            @oversize="onOversize"
          >
            相册选择
          </van-uploader>
        </li>
        <li><span>拍照</span></li>
        <li @click="qixao"><span>取消</span></li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import API from "../http/API.js";
import { Popup } from "vant";
import { Uploader } from "vant";
import { Toast } from "vant";
export default {
  name: "Information",
  components: {
    [Popup.name]: Popup,
    [Uploader.name]: Uploader,
    [Toast.name]: Toast,
  },
  data() {
    return {
      information: [],
      show: false,
      shuax: true,
    };
  },
  created() {
    this.http();
    this.yonh();
  },
  //   'auth/updateInfo, //用户信息重置
  // 请求方式：post
  // 参数：
  // ①filePath：头像 base64 编码，头像限制<5mb,jpg 或 png
  // ②封装 token
  // ③password：新密码，不做修改时传原始值或空字符串
  // ④nickname：新昵称，不做修改时传原始值或空字符串
  // ⑤mobile：新手机号，不做修改时传原始值或空字符串
  // 10. 'goods/count', //获取统计商品总数
  // 请求方式：get
  // 无参
  methods: {
    http() {
      this.$nextTick(() => {
        this.information = JSON.parse(localStorage.getItem("userInfo"));
        console.log(this.information);
        this.$forceUpdate();
      });
    },
    fanh() {
      this.$router.go(-1);
    },
    showPopup() {
      this.show = true;
    },
    qixao() {
      console.log("132456");
      this.show = false;
    },
    // 返回布尔值
    beforeRead(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        Toast("请上传 jpg 格式图片");
        return false;
      }
      return true;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中",
      });

      this.$post(API.POST_AUTH_updateInfo, {
        filePath: file.content,
      })
        .then((result) => {
          Toast.clear();
          this.show = false;
          this.yonh();
        })
        .catch((err) => {});
    },
    onOversize(file) {
      console.log(file);
      Toast("文件大小不能超过 500kb");
    },
    // 返回 Promise
    // 更新用户信息

    yonh() {
      this.$get(API.GET_AUTH_INFO, {
        token: this.$store.state.token,
      })
        .then((res) => {
          localStorage.setItem("userInfo", JSON.stringify(res.data));
          console.log(res);
          this.shuax = false;
          this.information = res.data;
          console.log("成功");
          this.http();
          this.shuax = true;
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  height: 100%;
  background-color: @background;
}
.navtobo {
  height: 50px;
  //   background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  ul {
    display: flex;
    margin-left: 10px;
    margin-right: 10px;
    width: 100%;
    // border: 1px solid #000;
    height: 30px;
    li {
      &:nth-child(1) {
        width: 30px;
        height: 100%;
        display: flex;
        align-items: center;
        // border: 1px solid #000;
        .img {
          width: 20px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &:nth-child(2) {
        flex: 1;
        display: flex;
        align-items: center;
        span {
          font-size: 17px;
        }
      }
      &:nth-child(3) {
        width: 30px;
        height: 30px;
        // border: 1px solid #000;
        .img {
          width: 25px;
          height: 25px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.xingxi {
  background-color: rgb(255, 255, 255);
  ul {
    margin-left: 10px;
    margin-right: 10px;
    li {
      border-bottom: 1px solid @background;
      &:nth-child(1) {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        .img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          border: 3px solid rgb(228, 228, 228);
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &:nth-child(2) {
        display: flex;
        height: 40px;
        align-items: center;
        div {
          font-size: 16px;
          &:nth-child(1) {
            width: 50px;
          }
          &:nth-child(2) {
            flex: 1;
          }
          &:nth-child(3) {
            height: 25px;
            width: 25px;
            //   border: 1px solid #000;
            transform: rotate(180deg);
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      &:nth-child(3) {
        display: flex;
        height: 40px;
        align-items: center;
        div {
          font-size: 16px;
          &:nth-child(1) {
            width: 50px;
          }
          &:nth-child(2) {
            flex: 1;
          }
          &:nth-child(3) {
            height: 20px;
            width: 20px;
            transform: rotate(180deg);
            //   border: 1px solid #000;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      &:nth-child(4) {
        display: flex;
        height: 40px;
        align-items: center;
        div {
          font-size: 16px;
          &:nth-child(1) {
            width: 50px;
          }
          &:nth-child(2) {
            flex: 1;
          }
          &:nth-child(3) {
            height: 20px;
            width: 20px;
            transform: rotate(180deg);
            //   border: 1px solid #000;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
.fnele {
  li {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    &:nth-child(1) {
      border-bottom: 1px solid rgb(201, 201, 201);
    }
    &:nth-child(2) {
      border-bottom: 3px solid rgb(201, 201, 201);
    }
  }
}
</style>